import React, {useContext, useEffect, useState} from 'react';
import {Alert, Dimensions, ImageBackground, Platform, ScrollView, TouchableOpacity, View} from 'react-native';
import {Divider, ListItem, Text} from 'react-native-elements';

import LocaleContext from '../libs/locale';

import ImageA from '../assets/My/a.png';
import ImageB from '../assets/My/b.png';
import ImageC from '../assets/My/c.png';
import ImageD from '../assets/My/d.png';
import logo from '../assets/logo.png';
import right_grey from '../assets/My/right_grey.png'
import WalletContext from "../libs/wallet";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {constansts} from "../libs/constansts";
import ImagePicker from "react-native-image-crop-picker";
import {uploadImage} from "../libs/uploadImg";

const {width,height,scale} = Dimensions.get("window");

const SetMyInfo = ({ navigation,route }: any) => {
    const locale: any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const [Name, setName] = useState(constansts.Name);
    const [refresh, setRefresh] = useState(true);
    const [ImageUrl, setImageUrl] =  useState(constansts.ProfilePhoto );
    useEffect(()=>{
        const work = async () => {
            if(!refresh)
            {
                return ;
            }
            console.log("22222")
            constansts.Name = await AsyncStorage.getItem('@pocketName');
            setName(constansts.Name);
            setRefresh(false)
        }
        work();
    },[refresh])
    useEffect(()=>{
        navigation.addListener('focus', () => {
            setRefresh(true);
        });
    },[])
    return (
        <ScrollView>
            <View>
                <ListItem bottomDivider
                //           onPress={() => {
                //     ImagePicker.openPicker({
                //     width:width/360*600,
                //     height:width/360*600,
                //     cropping:true,
                //     includeBase64:true
                // }).then(async (image: any)=>{
                //     setImageUrl({uri:image.path});
                //     constansts.ProfilePhoto = {uri:image.path};
                //     await AsyncStorage.setItem('@ProfilePhoto', JSON.stringify({uri:image.path}));
                //     console.log(image);
                //
                //         // let params = {
                //         //     userId:'abc12345',  //用户id
                //         //     path:'file:///storage/emulated/0/Pictures/image.jpg'  //本地文件地址
                //         // }
                //         //uploadImage('app/uploadFile',params )
                //         //     .then( (res:any)=>{
                //         //         //请求成功
                //         //         if(res.header.statusCode == 'success'){
                //         //             //这里设定服务器返回的header中statusCode为success时数据返回成功
                //         //             upLoadImgUrl = res.body.imgurl; //服务器返回的地址
                //         //         }else{
                //         //             //服务器返回异常，设定服务器返回的异常信息保存在 header.msgArray[0].desc
                //         //             console.log(res.header.msgArray[0].desc);
                //         //         }
                //         //     }).catch( err=>{
                //         //     //请求失败
                //         // })
                // })
                // }}
                >
                    <ListItem.Content>
                        <View style={{flexDirection:"row"}}>
                            <ListItem.Title>{locale?._('SetMyInfo.ProfilePhoto')}</ListItem.Title>
                            <View style={{flex:1,flexDirection:"row",justifyContent:"flex-end"}}>
                                <ImageBackground source={ImageUrl} style={{width:width/360*70,height:width/360*70}}/>
                            </View>
                        </View>
                    </ListItem.Content>
                    <ListItem.Chevron />
                </ListItem>
                <ListItem bottomDivider onPress={()=>{navigation.navigate("SetName")}}>
                    <ListItem.Content>
                        <View style={{flexDirection:"row"}}>
                            <ListItem.Title>{locale?._('SetMyInfo.Name')}</ListItem.Title>
                            <View style={{flex:1,flexDirection:"row",justifyContent:"flex-end"}}>
                                <Text>{Name}</Text>
                            </View>
                        </View>
                    </ListItem.Content>
                    <ListItem.Chevron />
                </ListItem>
            </View>
        </ScrollView>
    );
};

export default SetMyInfo;
